<template>
  <div>
    <cart-head />
    <div v-if="isshow" style="width: 100%">
      <img
        style="width: 100%"
        src="../../assets/img/213246-1586525566c099.jpg"
        alt=""
      />
      啥都没得哦<br />记得添加么么哒
    </div>
    <div id="itemst" style="padding: 2.3rem 0 1.5rem 0">
      <div class="item" v-for="dx in items" :key="dx.id">
        <van-swipe-cell>
          <div class="style">
            <van-checkbox
              v-model="dx.selected"
              @change="setSeclect(dx.key, dx.selected)"
            />
            <div class="Cart-img">
              <img :src="dx.pic" alt="" />
            </div>
            <div class="Cart-des">
              <div class="text">{{ dx.name }}</div>
              <div class="number">
                数量:
                <!-- 步进器 -->
                <van-stepper
                  v-model="dx.number"
                  @change="changeNum(dx.key, dx.number)"
                  theme="round"
                  button-size=".4rem"
                />
              </div>
              <!-- <div class="Cart-stores">库存： {{ dx.stores }} 份</div> -->
              <div class="Cart-price">店铺价： ￥{{ dx.price }}</div>
            </div>
          </div>
          <van-divider :style="{ borderColor: '#666' }" />
          <template #right>
            <van-button
              square
              @click="delItem(dx.key)"
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <van-submit-bar
      :price="price * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <message />
  </div>
</template>

<script>
import Message from '../../components/Message'
import CartHead from './components/CartHead'
import { getToken } from '../../utils/index'
import {
  fetchCartItems,
  setCartItemNum,
  setCartItemSelect,
  delCartItem
} from '../../api/index'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      items: [],
      number: '',
      price: '',
      total: 0,
      isshow: false
    }
  },
  created () {
    this.getCart()
  },
  methods: {
    delItem (key) {
      // 删除商品
      Dialog.confirm({
        title: '删除商品',
        message: '确认删除此商品吗'
      }).then(() => {
        delCartItem({
          key,
          token: getToken()
        }).then((res) => {
          location.reload()
          if (res.data.code === 0) {
            location.reload()
            this.total = res.data.data.price
            this.items = res.data.data.items
            this.number = res.data.data.number
          }
          if (res.data.code === 700) {
            // 商品全部删除
            this.$router.go(0)
            this.total = 0
            this.items = []
            this.number = 0
          }
        })
      })
    },
    setSeclect (key, selected) {
      // 点击切换商品选中状态
      setCartItemSelect({
        key,
        selected,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.price = res.data.data.price
          this.items = res.data.data.items
          this.number = res.data.data.number
        }
      })
    },
    changeNum (key, number) {
      // 修改购物车商品购买数量
      setCartItemNum({
        key,
        number,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.price = res.data.data.price
          this.items = res.data.data.items
          this.number = res.data.data.number
        }
      })
    },
    onSubmit () {
      // 判断是否有选中的商品
      console.log(this.items.some((item) => item.selected))
      if (this.items.some((item) => item.selected)) {
        // 点击跳转到创建订单页
        this.$router.push('/orderCreate')
      } else {
        this.$toast.success('您还没有选择任何商品')
      }
    },
    // 请求初始数据
    getCart () {
      fetchCartItems({
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.number = res.data.data.number
          this.price = res.data.data.price
        }
        if (res.data.code === 700) {
          this.isshow = true
        }
      })
    }
  },
  watch: {
    // 监听获取角标
    items (newVal) {
      this.$store.commit('cart/vuxcart', {
        items: this.items,
        buyNumber: this.number
      })
    }
  },
  computed: {
    allChecked: {
      // 全选
      get () {
        return this.items.every((item) => item.selected)
      },
      set (allChecked) {
        // 点击全选修改所有商品选中状态
        // 保存所有商品的key
        const keys = []
        this.items.forEach((item) => {
          keys.push(item.key)
        })
        setCartItemSelect({
          // 购物车记录的key，多个key请用英文逗号分隔
          key: keys.join(','),
          selected: allChecked,
          token: getToken()
        }).then((res) => {
          if (res.data.code === 0) {
            this.price = res.data.data.price
            this.items = res.data.data.items
            this.number = res.data.data.number
          }
        })
      }
    }
  },
  components: { CartHead, Message }
}
</script>

<style lang="scss" scoped>
.delete-button {
  height: 100%;
}
.item {
  .style {
    display: flex;
    input {
      margin-right: 0.2rem;
      align-self: center;
    }
    .Cart-img {
      width: 4rem;
      height: 3.8rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .Cart-des {
      font-size: 0.4rem;
      align-self: flex-end;
      margin-left: 1rem;
      .text {
        color: rgb(4, 5, 78);
        font-size: 0.6rem;
        margin: 0 0 0.3rem 0rem;
      }
      .number {
        display: flex;
        margin: 0 0 0.3rem 0rem;
        .van-stepper {
          margin-left: 0.1rem;
          align-self: center;
        }
      }
      .Cart-price {
        color: red;
        font-size: 0.5rem;
        padding: 0.3rem 0 0.3rem 0;
      }
    }
  }
}
</style>
